<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
<title>mainpage.jsp</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link type="text/css" href="/jQuery/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css"
		rel="stylesheet" />
<script src="<%=request.getContextPath() %>/jQuery/jquery-1.7.1.min.js" language="javascript"></script>
<script src="<%=request.getContextPath() %>/js/jquery.tableEdit.js" language="javascript"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/ui/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.datepicker-zh-CN.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/jQuery/external/jquery.bgiframe-2.1.2.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.core.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.widget.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.tabs.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.mouse.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.button.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.draggable.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.position.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.resizable.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.ui.dialog.js"></script>
<script src="<%=request.getContextPath() %>/jQuery/ui/jquery.effects.core.js"></script>
<link type="text/css" href="<%=request.getContextPath() %>/jQuery/ui/start/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<link type="text/css" href="<%=request.getContextPath() %>/new_css/main.css" rel="stylesheet" />
<link type="text/css" href="<%=request.getContextPath() %>/new_css/layout.css" rel="stylesheet" />
<link href="<%=request.getContextPath() %>/new_css/default/style.css" rel="stylesheet" type="text/css" />
<link href="<%=request.getContextPath() %>/jQuery/jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/grid.locale-cn.js" type="text/javascript"></script>
<script src="<%=request.getContextPath() %>/jQuery/jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style type="text/css">
.cellEdit,.cellDel{
  cursor: pointer;
}
body table{
 font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {  
    $(":button").button();   
    js_makeList() ; 
  	$("#dialog:ui-dialog").dialog("destroy");
  	$("#dialogEmployee" ).dialog({
			autoOpen: false,
			height: 200,
			width:350,
			modal: true,
			resizable:false,
			close: function() {
		  	  
			}
		});
  });
function js_makeList() {
	   jQuery("#roleList").jqGrid({
	    url : 'role!initRole.do?'+$("#srhForm").serialize() ,
	    datatype : "xml",
	    autowidth: true, 
	    colNames : [ '用户名称',  '操作'],
	    colModel : [ {name : 'roleName', index : 'roleName', width : 200, align : "center", sortable : false},
	           	     {name : 'colOper', index : 'colOper', width : 120, align : "center", sortable : false}],
	    height: 'auto',
	    subGrid: false,
	    rowNum:200,
gridComplete : function() {
  var graduateIds = jQuery("#roleList").jqGrid('getDataIDs');
  for ( var i = 0; i < graduateIds.length; i++) {
    var cl = graduateIds[i];
    var link = "<a class='cellEdit' title='编辑' value='"
        + cl+ "'>编辑</a><a class='cellDel' title='删除' value='"
        + cl + "'> 删除</a>";
    jQuery("#roleList").jqGrid('setRowData', cl, {
      colOper : link
    });
  }
}
	 });
	  $(".cellEdit").live('click', function() {
		   var id = $(this).attr("value");
		   $.ajax({
          type : "POST",
          url : "role!editRole.do?role.roleId="+id,
          dataType : "json",
          error : function() {},
          success : function(data, textStatus) {
 			var json = eval(data);
            if (json!= ""||json!=null) {
              $("#dialogEmployee").dialog("open");
              $("#roleName").val(json.role.roleName);
              $("#roleId").val(json.role.roleId);
              } else {
              alert("系统出错");
            }
          }
    });
		});
	  $(".cellDel").live('click', function() {
		   var id = $(this).attr("value");
		   $.ajax({
         type : "POST",
         url : "role!deleteRole.do?role.roleId="+id,
         dataType : "json",
         error : function() {},
         success : function(data, textStatus) {
			var json = eval(data);
           if (json!= ""||json!=null) {
         	   alert("删除成功");
         	  var url = 'role!initRole.do';  
			  jQuery("#roleList").jqGrid('setGridParam', { url : url}).trigger('reloadGrid');
             } else {
             alert("删除出错");
           }
         }
   });
		});
	}
function reset(){
	 $("#roleId").val("");
	$("#roleName").val("");
	
}
function add(){
	   reset();
	  $("#dialogEmployee").dialog("open");
}
function save(){
	 $.ajax({
         type : "POST",
         url : "role!saveRole.do",
         data: $("#form").serialize(),
         dataType : "json",
         error : function() {},
         success : function(data, textStatus) {
			var json = eval(data);
           if (json.success) {
               alert("保存成功");
               $("#dialogEmployee").dialog("close");
               reload();
             } else {
               alert("保存失败");
           }
         }
   });
}
function reload(){
	var url = 'role!initRole.do';  
	jQuery("#roleList").jqGrid('setGridParam', { url : url}).trigger('reloadGrid');
}
function checkRole(){
	if($("#roleName").val()==""){
            alert("请输入角色名称!");
            return false;
	}
	 $.ajax({
         type : "POST",
         url : "role!checkRole.do",
         data: $("#form").serialize(),
         dataType : "json",
         error : function() {},
         success : function(data, textStatus) {
			var json = eval(data);
           if (json.message=="") {
               save();
             } else {
               alert(json.message);
           }
         }
   });
}
</script>
</head>

<body>
<form id="srhForm">
<table align="left" style="margin-top: 10px; margin-left: 18px; width: 400px;" >
	<tr>
		<td  colspan="3" style="text-align: right;">
		  <input type="button" value="新增" onclick="add();"/>
		</td>
	</tr>
	<tr>
   		<td>
   			<table id="roleList"></table>
   		</td>
	</tr>
</table>
</form>
<div id="dialogEmployee">
  <form id="form">
	  <table cellspacing="0" class="uinfortable" style="width: 100%">
	       <tr>
	          <th>角色名称：</th>
	          <td>
	            <input id="roleName" type="text" name="role.roleName" />
	            <input id="roleId" type="hidden" name="role.roleId">
	          </td>
	       </tr>
	        <tr>
	          <td colspan="2" style="text-align: center;">
	            <input type="button" onclick="checkRole()" value="保存"/>
	            <input type="button" onclick="reset()" value="重置"/>
	          </td>
	       </tr>
	  </table> 
   </form>
</div>
</body>
</html>
